<template>
	<view class="top-container"></view>
	<!-- 车辆列表 -->
	<view class="vehicle-list">
		<view class="vehicle-item" v-for="(vehicle, index) in vehicles" :key="index" @click="selectVehicle(index)">
			<image :src="vehicle.img" class="vehicle-img" />
			<view class="vehicle-info">
				<view class="vehicle-model">车型：{{ vehicle.model }}</view>
				<view class="vehicle-license">车牌：{{ vehicle.license }}</view>
			</view>
			<view class="vehicle-select">
				<image v-if="vehicle.selected" src="/static/images/组 5 拷贝-car.png" class="select-icon" />
				<image v-else src="/static/images/椭圆 4 拷贝 2-car.png" class="select-icon" />
			</view>
		</view>
	</view>

	<!-- 底部“添加车辆”按钮 -->
	<view class="add-vehicle-btn" @click="addVehicle">
		<image src="/static/images/加号-car.png" class="add-icon" />
		<text>添加车辆</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				vehicles: [{
						img: "/static/images/头3.jpg", // 车辆图片路径
						model: "奔驰-GR",
						license: "豫M35468",
						selected: true // 标记是否选中
					},
					{
						img: "/static/images/头3.jpg",
						model: "奔驰-GR",
						license: "豫M35468",
						selected: false
					},
					{
						img: "/static/images/头3.jpg",
						model: "奔驰-GR",
						license: "豫M35468",
						selected: false
					}
				]
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			// 切换车辆选中状态
			selectVehicle(index) {
				this.vehicles.forEach((v, i) => {
					v.selected = i === index; // 点击项设为选中，其余设为未选中
				});
			},
			// 跳转到“添加车辆”页面
			addVehicle() {
				uni.navigateTo({
					url: "/pages/addVehicle/addVehicle"
				});
			}
		}
	
	}
</script>

<style>
	.top-container {
		background-color: #2176F3;
		height: 350rpx;
	}

	/* 车辆列表项 */
	.vehicle-list {
		padding: 20rpx;
		margin-top: -350rpx;
	}

	.vehicle-item {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.vehicle-img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		/* 圆形车辆图 */
	}

	.vehicle-info {
		flex: 1;
		/* 占中间剩余空间 */
		margin: 0 20rpx;
	}

	.vehicle-model {
		font-size: 32rpx;
		margin-bottom: 10rpx;
	}

	.vehicle-license {
		font-size: 28rpx;
		color: #666;
	}

	.vehicle-select .select-icon {
		width: 40rpx;
		height: 40rpx;
	}

	/* 底部添加车辆按钮（固定在底部） */
	.add-vehicle-btn {
	  position: fixed; /* 固定定位，相对于视口 */
	  bottom: 40rpx; /* 距离底部的距离 */
	  left: 40rpx; /* 距离左侧的距离 */
	  right: 40rpx; /* 距离右侧的距离 */
	  z-index: 99; /* 确保在其他内容上方 */
	  
	  background: linear-gradient(to right, #2196F3, #0D47A1);
	  color: #fff;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  height: 80rpx;
	  border-radius: 40rpx;
	  font-size: 32rpx;
	}
	.add-icon {
	  width: 30rpx;
	  height: 30rpx;
	  margin-right: 10rpx;
	}
</style>